<template>
  <div id="main" style="height:25vh"></div>
</template>

<script>
/* eslint-disable no-undef */
require('../../static/weishidataview/echarts-all')
export default {
  name: 'TwOldChart',
  mounted () {
    this.resizeChart()
  },
  data () {
    return {
      option: {},
      stuNumList: []
    }
  },
  methods: {
    resizeChart () {
      let vm = this
      let nameList = []
      this.$axios.post('/tw-cloud-datatheme-server/themedata/app_sy_xssltj?tjnf=2019').then(res => {
        let {serverResult, pageInfo} = res.data
        if (serverResult.resultCode === '200') {
          this.stuNumList = pageInfo.list
          let myChart = echarts.init(document.getElementById('main'))
          let option = {
            color: ['#09f6ff', '#b79fd9', '#2bc3e2', '#eeaf87', '#d15b70', '#4c6aff'],
            calculable: false,
            tooltip: {
              formatter: (params) => {
                let str = ''
                nameList.forEach(el => {
                  if (el === params[1]) {
                    str = `${params[1]}<br />学生人数: ${this.$reformNumber(params[2])}人`
                  }
                })
                return str
              }
            },
            series: (function () {
              let series = []

              for (let i = 3; i < 20; i++) {
                series.push({
                  name: '学生人数',
                  type: 'pie',
                  itemStyle: {
                    normal: {
                      label: {
                        show: i > 18,
                        textStyle: {
                          fontSize: 16
                        },
                        // formatter: ((params) => {
                        //   return '{b}\n{c}'
                        // })()
                        formatter: (function (params) {
                          return '{b}\n{c}'
                        }())
                      },
                      labelLine: {show: i > 18, length: 20}
                    }
                  },
                  label: {
                    show: true,
                    fontSize: 20
                  },
                  radius: [i * 4 + 10, i * 4 + 13],
                  data: (function () {
                    let list = []
                    let stuNumSum = 0
                    pageInfo.list.forEach(el => {
                      if (el.jyjb !== '总计') {
                        list.push({
                          value: el.xssl - 0,
                          name: el.jyjb
                        })
                        nameList.push(el.jyjb)
                      } else {
                        stuNumSum += (el.xssl - 0)
                      }
                    })
                    vm.$emit('pushStuNumFist', stuNumSum)
                    nameList = [...new Set(nameList)]
                    return list
                  })()
                })
              }
              return series
            })()
          }
          let label = option.series[option.series.length - 1].label
          label.formatter = (params) => {
            console.log(params)
          }
          myChart.setOption(option)
        }
      }).catch(resp => {
        console.log(resp)
      })
    }
  },
  created () {
    this.resizeChart()
  }
}
</script>

<style scoped>

</style>
